<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :isOpacity="false" :maxOpacity="1" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle" shadow>
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="main-loading">
				<uv-loading-icon :show="!loading" :size="28" timing-function="linear" mode="circle"></uv-loading-icon>
			</view>
			<view class="usable-list" v-if="coupon.usablelist.length > 0">
				<view class="usable-item" v-for="item in coupon.usablelist" :key="item.userCouponId">
					<view class="money"><text
							style="font-size: 32rpx; margin-right: 8rpx;">¥</text><text>{{parseInt(item.actualAmount)}}</text>
					</view>
					<view class="info">
						<view class="coupon-name">{{item.couponName}}</view>
						<view class="coupon-data">长期有效</view>
						<view class="coupon-rule" @tap.stop.prevent="checkRule">使用规则</view>
					</view>
					<view class="coupon-state" @tap.stop.prevent="goSwell(item.inflationState)">
						{{item.inflationState == 0 ? '去膨胀' : '已膨胀'}}
					</view>
				</view>
			</view>
			<view class="usable-list disabled-list" v-if="coupon.disabledlist.length > 0">
				<view class="disabled-title">不可用</view>
				<view class="usable-item" v-for="item in coupon.disabledlist">
					<view class="money"><text
							style="font-size: 32rpx; margin-right: 8rpx;">¥</text><text>{{parseInt(item.actualAmount)}}</text>
					</view>
					<view class="info">
						<view class="coupon-name">{{item.couponName}}</view>
						<view class="coupon-data">长期有效</view>
						<view class="coupon-rule" @tap.stop.prevent="checkRule">使用规则</view>
					</view>
					<view class="coupon-state">{{item.couponStatus == 4 ? '已过期' : '已使用'}}</view>
				</view>
			</view>
			<view v-show="coupon.usablelist.length <= 0 && coupon.disabledlist.length <= 0">
				<empty fixed></empty>
			</view>
		</view>
		<uv-popup ref="popuprule" bgColor="none" zIndex="2582" overlayOpacity="0.7">
			<view class="rule-pop">
				<view class="title">使用规则</view>
				<view>1.用户支付1元（好评后可返）可获得一张10元无门槛抵用券</view>
				<view>2.分享小程序给3个好友并邀请对方注册成功后，您将获得一次优惠翻倍的机会，最高可暴涨至30元</view>
				<view>3.限量1万份，每个ID限购一次</view>
				<view>4.已经购买成功的用户，如因某些特殊原因需要取消订单的，可联系客服人员协助取消订单，退款后不可再次购买</view>
				<view>5.订单完成并好评后，可以联系客服返1元</view>
				<view class="i-see" @tap.stop.prevent="iSee">我知道了</view>
			</view>
		</uv-popup>
		<survey-pop></survey-pop>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '优惠券', //标题
				loading: false,
				coupon: {
					usablelist: [],
					disabledlist: [],
				}
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.getPageData()
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			this.appraise.page = 1
			this.getPageData()
		},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			// 返回上一页
			goBack: function(url) {
				app.beNavigateBack();
			},
			goSwell(status) {
				if (status == 0) {
					app.navigationTo('page_account/advertising/advertising?isBuy=1')
				}
			},
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestDiscountList()]).then(() => {
					uni.stopPullDownRefresh();
					this.loading = true
				});
			},
			checkRule() {
				console.log(1);
				this.$refs.popuprule.open();
			},
			iSee() {
				this.$refs.popuprule.close();
			},
			requestDiscountList() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/coupon/query/coupon-list", null,
						(result) => {
							let data = result.data
							data.forEach(item => {
								if (item.couponStatus == 1) {
									this.coupon.usablelist.push(item)
								} else if (item.couponStatus == 4 || item.couponStatus == 2) {
									this.coupon.disabledlist.push(item)
								}
							})
						}, null, () => {
							resolve();
						}
					);
				});
			},

		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			min-height: 100vh;
			box-sizing: border-box;
			padding: 192rpx 24rpx 66rpx;
			/* #ifdef H5 */
			padding: 104rpx 24rpx 66rpx;

			/* #endif */
			.usable-list {
				.usable-item {
					box-sizing: border-box;
					padding: 24rpx 36rpx 24rpx 44rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.money {
						font-weight: 900;
						font-size: 48rpx;
						color: #FF4E04;
					}

					.info {
						flex: 1;
						margin-left: 49rpx;

						.coupon-name {
							font-weight: 900;
							font-size: 32rpx;
							color: #0E0E0D;
							line-height: 45rpx;
							margin-bottom: 12rpx;
						}

						.coupon-data {
							font-weight: 400;
							font-size: 26rpx;
							color: #0E0E0D;
							line-height: 37rpx;
							margin-bottom: 21rpx;
						}

						.coupon-rule {
							font-weight: 400;
							font-size: 22rpx;
							color: #999B9B;
							line-height: 30rpx;
							vertical-align: middle;

							&::after {
								font-family: "dy-iconfont";
								content: "\e600";
								font-size: 20rpx;
								vertical-align: middle;
								position: relative;
								top: -2rpx;
							}
						}
					}

					.coupon-state {
						width: 144rpx;
						height: 58rpx;
						background: #FF4E04;
						border-radius: 20rpx;
						font-weight: 600;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 58rpx;
						text-align: center;
					}
				}
			}

			.disabled-list {
				margin-top: 60rpx;

				.disabled-title {
					font-weight: 900;
					font-size: 32rpx;
					color: #1E1F1F;
					line-height: 45rpx;
					margin-bottom: 24rpx;
				}

				.money {
					color: #BBBCBB !important;
				}

				.coupon-rule {

					&::after {
						top: -1rpx;
					}
				}

				.coupon-state {
					background: #BBBCBB !important;
				}
			}
		}
	}

	.rule-pop {
		width: calc(100vw - 62rpx * 2);
		height: 719rpx;
		box-sizing: border-box;
		padding: 72rpx 56rpx;
		background: #FFFFFF;
		border-radius: 80rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999B9B;
		line-height: 37rpx;

		.title {
			margin-bottom: 40rpx;
			font-weight: 900;
			font-size: 32rpx;
			color: #282D2D;
			line-height: 45rpx;
			text-align: center;
		}
		.i-see{
			margin-top: 40rpx;
			width: 471rpx;
			height: 80rpx;
			background: #FF4E04;
			border-radius: 20rpx;
			font-weight: 600;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>